<template>
  <van-row class="education-details">
    <van-nav-bar :title="state.title" left-arrow @click-left="onClickLeft" />
    <van-row class="title-img">
      <img :src="state.images" alt="" />
    </van-row>
    <div style="padding: 20px 16px 0 16px; width: 100%" class="b-b">
      <van-row class="text-title-content">
        <p class="title">{{ state.title }}</p>
      </van-row>
      <van-row class="time-content">
        <van-col span="12" align="left">
          <span>
            {{ $moment(educationData).format("YYYY-MM-DD HH:mm:ss") }}
          </span>
        </van-col>
        <van-col span="12" align="right">
          <van-row class="time-text">
            <van-col span="14">
              <van-icon name="eye-o" />
              <span>3487</span>
            </van-col>
            <van-col span="10">
              <van-icon name="good-job-o" />
              <span>123</span>
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <van-row style="margin-top: 16px" class="html-content">
        <div v-html="state.educationData.content"></div>
      </van-row>
    </div>
  </van-row>
</template>
<script setup>
import { reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { educationDetails } from "@/api/home/home";

const route = useRoute();
const router = useRouter();
const state = reactive({
  title: route.query.title || "",
  id: route.query.id || null,
  images: route.query.images || "",
  educationData: {},
});
// 获取详情
const queryEducationDetails = () => {
  educationDetails({ id: state.id }).then((v) => {
    const data = v.data;
    state.educationData = data;
    console.log(v);
  });
};
queryEducationDetails();
// 返回上一页
const onClickLeft = () => {
  router.go(-1);
};
</script>
<style lang="scss" scoped>
.education-details {
  width: 100%;
  .van-nav-bar {
    width: 100%;
    .van-nav-bar__left {
    }
  }
  .title-img {
    width: 100%;
    img {
      width: 100%;
      height: 280px;
      object-fit: cover;
    }
  }
  .text-title-content {
    .title {
      font-size: 20px;
      font-weight: bold;
    }
  }
  .time-content {
    margin-top: 8px;
    span {
      color: #999;
      vertical-align: middle;
    }
    i {
      color: #999;
      vertical-align: middle;
    }
  }
  .b-b,
  .html-content * {
    box-sizing: border-box;
    overflow: hidden;
  }
}
</style>
